<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/7/2
  Time: 10:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        .container {
            display: flex;
            flex: 1;
        }

        .block {
            flex-grow: 1; /* 明确设置 flex-grow */
            padding: 20px;
            box-sizing: border-box;
        }
        .block1 {
            background-color:pink;
            width:1%;
        }
        .block2 {
            background-image: url("image/2.jpg");
            width: 850px;
        }
        .avatar {
            width: 100px; /* 设置头像宽度 */
            height: 100px; /* 设置头像高度 */
            border-radius: 50%; /* 设置为50%以实现圆形 */
            overflow: hidden; /* 隐藏超出边框的图片部分 */
        }
        .avatar img {
            width: 100%; /* 图片宽度继承父元素宽度 */
            height: auto; /* 图片高度自动调整以保持比例 */
        }
        button{
            color:black;
            background-color: white;
            font-size: 16px;
            width: 80px;
            height: 30px;
        }
        table {
            width: 60%; /* 表格宽度为100% */
            border-collapse: collapse; /* 合并相邻边框 */
        }
        td {
            border: 1px solid #ddd; /* 单元格边框 */
            padding: 8px; /* 单元格内边距 */
        }
        a{
            text-decoration: none;
            color: inherit;
        }
        a:hover {
            background-color:white;
        }
        .container > div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        table {
            width: 30%; /* 或者指定一个具体的宽度，如 500px */
            border-collapse: collapse; /* 合并边框，使边框看起来更连续 */
        }

        /* 设置单元格的样式 */
        td {
            /*border: 1px solid #ddd; !* 设置边框 *!*/
            /*padding: 8px; !* 设置内边距 *!*/
            text-align:center; /* 文本左对齐 */
        }
    </style>
</head>
<body>
<div class="container">
    <div class="block block1">
        <div class="avatar">
            <img src="image/1.jpg" alt="用户头像">
        </div>
        <h1>欢迎进入学生信息</h1>
        <h1>管理系统</h1>
        <form method="post" action="login.html">
            <button type="submit">退出登录</button>
        </form>
        <p></p>
        <table>
            <tr>
                <td style="background-color: white">首页</td>
            </tr>
            <tr>
                <td><a href="classes.jsp">班级管理</a></td>
            </tr>
            <tr>
                <td><a href="students.jsp">学生管理</a></td>
            </tr>
            <tr>
                <td><a href="grades.jsp">成绩管理</a></td>
            </tr>
            <tr>
                <td><a href="Course.jsp">课程管理</a></td>
            </tr>
            <tr>
                <td><a href="person.jsp">个人中心</a></td>
            </tr>
        </table>
    </div>
    <div class="block block2">
        <h1>
            欢迎使用
        </h1>
        <h1>
            学生信息管理系统
        </h1>
    </div>
</div>
</body>
</html>
